<template>
	<!-- 选择的样式 偏好管理用到了 -->
	<view>
		<slot name="title" v-if="item.cateName">
			<view class="u-font-32 box-title text-bold u-padding-bottom-24">{{item.cateName}}</view>
		</slot>
		<item-box>
			<view class="u-padding-bottom-20">
				<slot name="inner-title">
					<!-- <view class="u-font-32 box-title text-bold u-padding-bottom-24">{{item.cateName}}</view> -->
				</slot>
			</view>
			<view class="u-padding-left-10 u-padding-right-10">
				<u-row>
					<u-col :span="span" v-for="(c,i) in item.children" :key="i">
						<view class="u-margin-bottom-24">
							<item-btn :type="checked.indexOf(c.id)!=-1 ? '' : 'plain'" width="100%" height="64"   @click="selectItem(c.id)">
								<text class="u-font-24">{{c.cateName}}</text>
							</item-btn>
						</view>
					</u-col>
				</u-row>
			</view>
		</item-box>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				default: ()=>({children:[]})
			},
			value:{
				type:[Array,String],
				default:()=>([])
			},
			type:{ //根据状态判断是单选还是多选
				type:String,
				default:'checkbox'
			},
			maxChecked:{
				type:[String,Number],
				default:999
			},
			span:{
				type:[String,Number],
				default:3
			}
		},
		data() {
			return {
				checked: []
			}
		},
		created() {
			this.checked = this.value;
		},
		methods: {
			selectItem(id) {
				const index = this.checked.indexOf(id);
				this.type==='checkbox' ? (index>-1 ? this.checked.splice(index,1) : this.setChecked(id)) : this.checked.splice(0,1,id); //为了不报错
				this.$emit('input',this.checked);
				this.$emit('select',this.checked)
			},
			setChecked(id){
				if(this.checked.length<this.maxChecked){
					this.checked.push(id)
				}else{
					this.$u.toast(`选择数量不能大于${this.maxChecked}个`)
				}
			},
		},
	}
</script>